<template>
  <el-image fit="cover"
    :alt="hasRealVal(alt) ? alt : 'Toolify'"
    :src="hasRealVal(src) ? src : 'https://cdn.toolify.ai/default.webp'"
    :lazy="lazy"
    class="flex items-center justify-center">
    <img src="https://cdn.toolify.ai/default.webp"
      slot="placeholder"
      class="w-full object-cover"
      alt=""
      srcset="">
    <img src="https://cdn.toolify.ai/default.webp"
      slot="error"
      class="w-full object-cover"
      alt=""
      srcset="">
  </el-image>
</template>

<script>
export default {
  name: 'CommonImage',
  props: {
    src: {
      type: String | null,
      default: 'https://cdn.toolify.ai/default.webp',
    },
    alt: {
      type: String | null,
      default: 'Toolify',
    },
    lazy: {
      type: Boolean,
      default: true,
    },
  },
}
</script>